<!-- 个人中心页 -->
<template>
	<view class="my-content u-page" style="height: auto;overflow-x: hidden;width: 100%;">
		<!-- <tabbar /> -->
		<div class="status-bar"></div>

		<!-- 登录遮罩 -->
		<div class="loginMask" @click="login" v-if="!token"></div>
		<!-- 登录遮罩 -->

		<!-- 通知 -->
		<Notification />
		<!-- 通知 -->

		<!-- 设置 -->
		<view class="set">

			<image :src='serverImageUrl("/static/images/user/set.png")' style="width: 50rpx;" mode="widthFix"
				@click="set"></image>

		</view>
		<!-- 设置 -->

		<!-- 用户信息 -->
		<div style="position: relative;z-index:1">
			<userInfoHeader :userInfo="userInfo" :userStatus="userStatus" :userInfoFull="userInfoFull" />
			<div v-if="userStatus==0&&userInfo.id" style="position: absolute;width:100%;height:100%;left:0;top:0;"
				@click="goAuth">
			</div>
		</div>
		<!-- 用户信息 -->

		<!-- 认证图标列表 -->
		<view>
			<view v-if="userInfo.icon_auth.length!=0" v-for="(it,ind) in userInfo.icon_auth" :key="ind">
				<view>
					<image :src="ImageUrl(it.image)">
					</image>
					<text v-if="lang==='zh'">{{it.title}}</text>
					<text v-if="lang!='zh'">{{it.title_ru}}</text>
				</view>
			</view>
		</view>
		<!-- 认证图标列表 -->

		<!-- ========VIP======== -->
		<vip v-if="userInfo&&userInfo.country.value === '0' && off" :userInfo="userInfo" />
		<!-- ========VIP======== -->

		<!-- ========我的发布======== -->
		<UserTitle title="我的发布" moreGoPath='pages/user/issue/issue' />

		<view class="MyService">
			<view class="pp_nav_tab">
				<view class="pp_nav" @click="pp_nav(1)" :class="{pp_nav_on:pp_nav_on==1}">{{ $t('推广') }}
					<div class="light" :class="{lightActive:pp_nav_on ==1}"></div>
				</view>
				<view class="line"></view>
				<view class="pp_nav" @click="pp_nav(2)" :class="{pp_nav_on:pp_nav_on!=1}">{{ $t(jb) }}
					<div class="light" :class="{lightActive:pp_nav_on !=1}"></div>
				</view>
			</view>

			<view v-if="pp_nav_on==1" class="pp_nav_c">
				<!-- <navItem auth="goods" type="1" title="货物出售" iconPath="/static/images/user/newUI/n1.png" /> -->
				<navItem auth="transport" type="1" title="运输" iconPath="/static/images/user/newUI/n2.png" />
				<navItem auth="crossborder" type="1" title="跨境货代" iconPath="/static/images/user/newUI/n3.png" />
				<navItem auth="professional" type="1" title="专业代办" iconPath="/static/images/user/newUI/n4.png" />
				<navItem auth="lifead" type="1" title="生活广告" iconPath="/static/images/user/newUI/n5.png" />
				<navItem auth="exposure" type="1" title="曝光台" iconPath="/static/images/user/newUI/n6.png" />
			</view>

			<view v-if="pp_nav_on!=1" class="pp_nav_c">
				<navItem auth="goods" type="2" title="货物竞标" iconPath="/static/images/user/newUI/n1.png" />
				<navItem auth="transport" type="2" title="运输竞标" iconPath="/static/images/user/newUI/n2.png" />
				<navItem auth="crossborder" type="2" title="跨境货代" iconPath="/static/images/user/newUI/n3.png" />
				<navItem auth="professional" type="2" title="佣金发布" iconPath="/static/images/user/newUI/n4.png" />
			</view>
		</view>

		<!-- ========我的发布======== -->



		<!-- ========我的商品======== -->

		<!-- 供应商和经销商 显示 -->
		<template v-if="userInfoFull.identity_type=='1'||userInfoFull.identity_type=='0'">
			<UserTitle title="我的商品库" moreGoPath='pages/user/goods/goodslist' />
			<view v-if="goodslist.length==0" @click="wait_kaifang" class="MyService">
				<view class="goodsEmpty">
					{{ $t('暂无商品') }}，{{ $t('立即添加') }}
				</view>
			</view>

			<view v-if="goodslist.length!=0" @click="wait_kaifang" class="MyService"
				style="display: flex; height: 200rpx;">
				<image v-for="(it,ind) in goodslist" :key="ind" v-if="ind<4" :src="imgUrl+it.logo" class="goodsImage">
			</view>

		</template>


		<!-- ========我的商品======== -->



		<!-- ========我的服务======== -->

		<UserTitle title="我的服务" />

		<view class="MyServices">
			<view class="list">
				<li v-for="(item, index) in list" :key="index" @click="serve(item, index)" v-if="item.show">
					<!-- <u-image width="60rpx" height="60rpx" shape="circle" :lazy-load="true" :src="item.image"></u-image> -->
					<image :src="item.image" style="width: 60rpx;height:60rpx;"></image>
					<text class="_fain">{{ item.lanhutext0 }}</text>
				</li>
			</view>
		</view>

		<!-- ========我的服务======== -->


		<authNamePopup v-if="authShow" :show="authShow"></authNamePopup>

		<view style="height: 150px;"></view>

	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/index.vue";
	import authNamePopup from "@/components/authNamePopup/authNamePopup.vue";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app"
	import {
		createC2CConversation,
		ImageUrl
	} from "@/common/public";
	import userInfoHeader from "./components/header.vue"
	import vip from "./components/vip.vue"
	import UserTitle from "./components/title.vue"
	import navItem from "./components/navItem.vue"
	import serviceMenu from "./data/serviceMenu.js"
	export default {
		components: {
			navItem,
			UserTitle,
			vip,
			userInfoHeader,
			tabbar,
			authNamePopup
		},
		data() {
			return {
				userStatus: null, //认证状态
				userInfoFull: {},
				token: "",
				off: false,
				scoreoff: false,

				lang: getApp().globalData.lang,
				currentLang: "",
				customer: '',
				userInfo: {
					label: [],
					country: {
						value: 0
					}
				},
				authShow: false,
				// src: '/static/images/index/WX20230607-235102@2x.png',
				list: [], //我的服务
				imgUrl: '',
				loading: false,
				isAuthName: -1,

				pp_nav_on: 1,
				goodslist: [],
				listLang: [],

				jb: '订单',
				isShow: false,
				isIcon: false,
				model: {
					username: '', //公司名称
					truename: '', //联系人（真实姓名）
					mobile: '', //联系电话
					idnum: '', //身份证号码
					area_id: [], //所在区域
					reg_address: '', //详细地址
					email: '', //邮箱
					fax: '', //传真
					weblink: '', //网站
					provide_transport: [], //运输工具
					transport_list: [{
						departureCity: '',
						arrivingCity: '',
						departureid: '',
						arrivingid: '',
						days: 0
					}], //运输路线
					main_product: '', //公司介绍
					product_image: [], //企业logo
					license_image: [], //营业执照 （资质证明）
					buy_videos: [], //企业宣传视频
					shop_image: [], //企业宣传图
					id: ''
				}

			}
		},
		async onLoad() {
			//uni.hideTabBar();
			this.imgUrl = IMAGE_URL
			// this.getUserInfo()
			await this.$onLaunched;

			// if (this.lang === 'zh') {
			// 	this.langID = 11
			// 	this.customer = getApp().globalData.site.im_customer001
			// } else {
			// 	this.langID = 12

			// 	this.customer = getApp().globalData.site.im_customer002
			// }
			if (this.lang === 'zh') {
				this.langID = 11
				//this.customer = getApp().globalData.site.im_customer001
				this.customer = 'iaYt02jzhHmoCCCqGpaxf5G0VzuMPwLU'
			} else {
				this.langID = 12
				//this.customer = getApp().globalData.site.im_customer002
				this.customer = 'iaYt02jzhHmoCCCqGpaxf5G0VzuMPwLU'
			}


			this.GoodsList() //获取货物列表信息

		},
		onShow() {
			this.token = uni.getStorageSync("xzdToken");
			this.userInfoFull = uni.getStorageSync("userInfoFull")
			this.loading = false
			this.authShow = false;

			var that = this

			this.$store.commit("getC2cUnreadMsgNum")
			this.GoodsList() //获取货物列表信息
			this.getUserInfo()

			this.setTabbarName();

			// 我的服务 菜单列表
			let list;
			if (this.currentLang != uni.getStorageSync("lang")) {
				list = serviceMenu(this);
			} else {
				if (!this.list || this.list.length == 0) {
					list = serviceMenu(this);
				} else {
					list = this.list;
				}
			}

			this.currentLang = uni.getStorageSync("lang")


			this.getData(this.userInfoFull.user_id)

			that.$u.api.user.appCheck().then(res => {
				that.off = res.logOff
				that.scoreoff = res.score

				uni.setStorageSync('off', res.logOff);

				if (uni.getStorageSync('off') == false) {
					that.jb = '订单'
				} else {
					that.jb = '竞标'
				}


				/* 验证是否实名认证 */
				//2认证 1认证中 0未认证
				that.$u.api.user.getUserAudit().then(r => {
					this.userStatus = r.status;
					//弹出认证窗并需要认证
					if (uni.getStorageSync('mobile')) {
						if (res.authShow && r.status == '0') {
							that.authShow = true;
						}
						//认证中或认证了更换认证图标
						if (r.status > 0) {
							that.isAuthName = r.status;
							const icon = {
								"1": HTTP_IMG_UTL + 'renzhengLoading.png',
								"2": HTTP_IMG_UTL + 'renzhengSuccess.png'
							}
							that.list.find(item => item.path === 'pages/user/register/authentication')
								.image = icon[r.status];
						}
					}

				})
				if (!that.isIcon) {
					//我的积分那个item
					const scoreMenuItem = list.find(item => item.lanhutext0 == that.$t('我的积分'));
					//积分按钮需隐藏隐藏并是中文就不显示积分按钮
					//scoreMenuItem.show = !(that.scoreoff == false && that.lang == 'zh');
					scoreMenuItem.show = !(that.scoreoff == false);
					that.isIcon = true
				}

				that.list = list
				that.loading = true

			})

		},
		methods: {
			getData(id) {
				let data = {
					user_id: id,
					type: 1,
					from: ''
				}
				this.$u.api.user.getUserHomepage(data).then(res => {
					let ared = []
					ared.push({
						label: this.lang == 'zh' ? res.userInfo.area_id.country_name : res.userInfo.area_id
							.country_name_ru,
						value: res.userInfo.area_id.country
					})
					ared.push({
						label: this.lang == 'zh' ? res.userInfo.area_id.province_name : res.userInfo
							.area_id.province_name_ru,
						value: res.userInfo.area_id.province
					})
					ared.push({
						label: this.lang == 'zh' ? res.userInfo.area_id.city_name : res.userInfo.area_id
							.city_name_ru,
						value: res.userInfo.area_id.city
					})
					let datas = {
						// country_name:res.userInfo.label[0].id,
						username: this.lang == 'zh' ? res.userInfo.username : res.userInfo.username_ru, //公司名称
						truename: this.lang == 'zh' ? res.userInfo.truename : res.userInfo
							.truename_ru, //联系人（真实姓名）
						mobile: res.userInfo.mobile, //联系电话
						idnum: res.userInfo.id_card, //身份证号码
						// label value
						area_id: ared, //所在区域
						reg_address: res.userInfo.reg_address, //详细地址
						email: res.userInfo.email, //邮箱
						fax: res.userInfo.fax, //传真
						weblink: res.userInfo.weblink, //网站
						// children id name user path
						provide_transport: res.userInfo.provide_transport.split(','), //运输工具
						transport_list: res.luxian.map(item => {
							return {
								departureCity: this.lang == 'zh' ? item.cfd.shortname : item.cfd
									.shortname_ru,
								arrivingCity: this.lang == 'zh' ? item.mdd.shortname : item.mdd
									.shortname_ru,
								departureid: item.cfd.id,
								arrivingid: item.mdd.id,
								days: 0
							}
						}),
						main_product: this.lang == 'zh' ? res.userInfo.main_product : res.userInfo
							.main_product_ru, //公司介绍
						product_image: res.userInfo.product_image, //企业logo
						license_image: res.userInfo.license_image2, //营业执照 （资质证明）

						buy_videos: [res.userInfo.buy_videos], //企业宣传视频
						shop_image: res.userInfo.shop_image, //企业宣传图
					}
					this.model = datas
					console.log('完善信息:', this.model);
				})
			},
			setTabbarName() {
				if (uni.getStorageSync("lang") != 'ru') {
					uni.setTabBarItem({
						index: 0, // tabIndex，tabbar的哪一项，从0开始
						text: '首页', // 新的名称
					});
					uni.setTabBarItem({
						index: 1, // tabIndex，tabbar的哪一项，从0开始
						text: '工作台', // 新的名称
					});
					uni.setTabBarItem({
						index: 2, // tabIndex，tabbar的哪一项，从0开始
						text: '发布', // 新的名称
					});
					uni.setTabBarItem({
						index: 3, // tabIndex，tabbar的哪一项，从0开始
						text: '消息', // 新的名称
					});
					uni.setTabBarItem({
						index: 4, // tabIndex，tabbar的哪一项，从0开始
						text: '我的', // 新的名称
					});
				} else {
					uni.setTabBarItem({
						index: 0, // tabIndex，tabbar的哪一项，从0开始
						text: 'Главная', // 新的名称
					});
					uni.setTabBarItem({
						index: 1, // tabIndex，tabbar的哪一项，从0开始
						text: 'Кабинет', // 新的名称
					});
					uni.setTabBarItem({
						index: 2, // tabIndex，tabbar的哪一项，从0开始
						text: 'Опубликовать', // 新的名称
					});
					uni.setTabBarItem({
						index: 3, // tabIndex，tabbar的哪一项，从0开始
						text: 'Сообщения', // 新的名称
					});
					uni.setTabBarItem({
						index: 4, // tabIndex，tabbar的哪一项，从0开始
						text: 'Мой', // 新的名称
					});
				}
			},
			goAuth() {
				this.$u.route('pages/user/register/authentication')
			},
			ImageUrl,
			login() {
				if (!this.isShow) {
					this.isShow = true
					this.$u.toast(this.$t('请先登录'));
					setTimeout(() => {
						this.$u.route('/pages/user/login/login')
					}, 1000)
					setTimeout(() => {
						this.isShow = false
					}, 3000)
				}
			},
			pp_nav(i) {
				this.pp_nav_on = i
			},
			//获取货物列表信息
			GoodsList(isSearch = true) {
				let data = {
					page: 1
				}
				this.$u.api.user.getGoodsList(data).then(res => {
					this.goodslist = res;
				})
			},
			async getUserInfo() {
				var userinfo = "";
				const that = this;
				const {
					deviceBrand,
					deviceModel,
					deviceId,
					osName,
					osVersion
				} = uni.getSystemInfoSync();
				console.log(deviceBrand, deviceModel, deviceId, osName, osVersion)
				userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' + osVersion
				let user = await that.$u.api.user.getUserInfo({
					userinfo: userinfo
				});
				this.userInfoFull = user;
				uni.setStorageSync("userInfoFull", user)

				// #ifdef APP-PLUS
				plus.push.getClientInfoAsync((info) => {
					let cid = info["clientid"];
					console.log(cid)
					userinfo = deviceBrand + ',' + deviceModel + ',' + deviceId + ',' + osName + ',' +
						osVersion + ',' + cid
					user = that.$u.api.user.getUserInfo({
						userinfo: userinfo
					});
				});
				// #endif


				this.userInfo = user
				this.userInfo.avatar = IMAGE_URL + this.userInfo.avatar

				if (this.scoreoff == false) {
					const blackMenuArr = [
						that.$t('我的积分'),
						that.$t('我的邀请'),
						that.$t('保证金账单'),
					]
					//我的积分那个item
					const scoreMenuItem = this.list.filter(item => blackMenuArr.indexOf(that.$t(item.lanhutext0)) > -
						1).forEach(item => {
						item.show = false;
					});

				} else {
					const scoreMenuItem = this.list.forEach(item => {
						item.show = true;
					});
				}

				// if (this.off == false) {
				// 	this.list.splice(10, 1)
				// }

				this.loading = true

			},
			//跳转设置界面
			set() {
				var that = this
				this.$u.api.user.is_user().then(r => {
					if (r) {
						that.$u.route('/pages/user/install/install')
					} else if (r == undefined) {
						that.$u.toast(that.$t('请先登录'));
						setTimeout(() => {
							// 此为uView的方法，详见路由相关文档
							that.$u.route('/pages/user/login/login')
						}, 1000)
					} else {
						that.$u.toast(that.$t('请先登录'));
						setTimeout(() => {
							// 此为uView的方法，详见路由相关文档
							that.$u.route('/pages/user/login/login')
						}, 1000)
					}
				})
			},
			//我的服务内容跳转
			serve(item, index) {
				var that = this
				this.$u.api.user.is_user().then(r => {
					if (r) {
						if (item.path === 'pages/user/register/authentication' && this.isAuthName == '2') {
							this.$u.toast(that.$t('已身份认证'))
							return;
						}
						if (item.path === 'pages/user/register/authentication' && this.isAuthName == '1') {
							this.$u.toast(that.$t('审核中'))
							return;
						}
						console.log(item, index)

						switch (index) {
							case 1:
								uni.navigateTo({
									url: '/pages/tabbar/order/index'
								})
								break;
							case 2:
								this.$u.route({
									// url: 'pages/user/homePage/homePage',
									url: 'pages/tabbar/order/ImproveInformation',
									params: {
										// id: this.userInfo.user_id
										model: JSON.stringify(this.model)
									}
								})
								break;
							case 5:
								// 在线客服

								createC2CConversation(that.customer, that, true)

								break;

							default:
								this.$u.route({
									url: item.path
								})
								break;
						}
					} else {
						that.$u.toast(that.$t('请先登录'));
						setTimeout(() => {
							// 此为uView的方法，详见路由相关文档
							that.$u.route('/pages/user/login/login')
						}, 1000)
					}
				})
			},
			wait_kaifang() {
				this.$u.route('pages/user/goods/goodslist')
				// uni.showToast({
				// 	title:this.$t('暂未开放')
				// })
			},
			one() {
				this.show = false
			},



		},
		computed: {

			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.desc {}

	page {
		background: #F6F6F6;
	}

	.u-page {
		display: flex;
		flex-direction: column;
		background-image: url("https://app.gluz.com.cn/uniappAssets/static/images/user/newUI/headerbg.png");
		background-size: 100% 500rpx;
		background-repeat: no-repeat;
		padding: 30rpx;
	}

	.pp {
		padding-left: 10rpx;
		font-size: 31rpx;
		font-weight: 600;
		color: #1C1C1C;
		height: 32rpx;
		line-height: 32rpx;
	}


	.flex {
		display: flex;
		align-items: center;
	}


	.MyService {
		width: 100%;
		position: relative;
		background-color: white;
		border-radius: 8rpx;
		background: linear-gradient(180deg, #EAEAEA 0%, rgba(255, 255, 255, 0) 50rpx), #FFFFFF;
	}


	//  我的服务
	.MyServices {
		width: 100%;
		position: relative;
		flex: 1;
		background-color: white;
		border-radius: 8rpx;

		p {
			// padding-top: 40rpx;
			padding-left: 39rpx;
			font-size: 31rpx;

			font-weight: 600;
			color: #1C1C1C;
			line-height: 44rpx;
		}

		.list {
			width: 100%;
			// height: 368rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 25rpx 0;
			padding-bottom: 0;

			li {
				width: 25%;
				padding: 0rpx;
				margin-bottom: 16rpx;
				box-sizing: border-box;
				list-style-type: none;
				display: flex;
				// justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 22rpx;
				font-weight: 400;
				color: #1C1C1C;
				line-height: 30rpx;
			}
		}
	}

	._fain {
		// word-break: break-all;
		margin-top: 18rpx;
		text-align: center;
		margin-bottom: 15rpx;
		padding: 0 8rpx 0 8rpx;

	}

	.pp_nav_img2 {
		width: 22%;
		text-align: center;
		float: left;
		margin-top: 20rpx;
		margin-left: 2%;
	}



	.status-bar {
		height: var(--status-bar-height);
	}

	.set {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 30rpx;
		top: var(--status-bar-height);
		margin-top: 30rpx;
		z-index: 9;
	}

	.pp_nav_tab {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;

		.light {
			width: 70rpx;
			height: 6rpx;
			border-radius: 14rpx;
			margin: 0 auto;
			background-color: #fff;
			margin-top: 8rpx;
			position: absolute;
			left: 50%;
			bottom: 8rpx;
			margin-left: -35rpx;
		}

		.lightActive {
			background: #FCCF14 !important;
		}

		.pp_nav {
			width: 50%;
			text-align: center;
			padding: 23rpx 0;
			font-size: 26rpx;
			color: #3D3D3D;
			font-weight: bold;
			position: relative;
		}
	}

	.line {
		width: 1rpx;
		height: 43rpx;
		background: #e1e1e1
	}

	.goodsImage {
		width: 150rpx;
		height: 150rpx;
		margin-top: 25rpx;
		margin-left: 15rpx;
		border-radius: 8rpx;
	}

	.goodsEmpty {
		border-radius: 20rpx;
		color: rgb(199, 216, 230);
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		text-align: center;
		width: 90%;
		margin: 24rpx auto;
		color: #3D3D3D;
	}

	.loginMask {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
	}

	.pp_nav_c {
		display: flex;
		flex-wrap: wrap;
	}
</style>